import React, { useContext, useEffect } from "react";

import { Layout, ConfigProvider, Button, message, Row, Col } from "antd";
import Store from "./mods/store";
import { useParams } from "react-router-dom";
import { defaultSchema } from "../../../lowCode/core/defaultSchema";
import { findSiteMenu, saveSiteMenu } from "../../../api";
import {
  LowCodeDesignerContext,
  LowCodeDesignerProvider,
} from "../../../lowCode/designer/Provider";
import DesignerSetter from "../../../lowCode/designer/Setter";
import * as setter from "../../../lowCode/material/setter";
import { SaveOutlined } from "@ant-design/icons";
import useSchema from "../../../lowCode/core/useSchema";
import DesignFrame from "../../../lowCode/designer/Decorator";
import LowCodeProvider from "../../../lowCode/core/Provider";
import LowCodePreview from "../../../lowCode/core/Preview";
import LowCodeRenderer from "../../../lowCode/core/Renderer";
import DesignerActionBar from "../../../lowCode/designer/ActionBar";
import renderActionBar from "../../../lowCode/designer/renderActionBar";
import { uniqueId } from "../../../lowCode/shared";
import LowCodeDesignerPreview from "../../../lowCode/designer/Preview";

import "./index.less";

const items2: any = {
  type: "PageContainer",
  _id: uniqueId(),
  props: {
    modal: [
      {
        title: "编辑用户",
        name: "edit",
        type: "AntdModal",
        _id: uniqueId(),
        props: {
          open: true,
        },
        children: [
          {
            type: "ProTable",
            _id: uniqueId(),
          },
        ],
      },
    ],
  },
  children: [
    {
      type: "Container",
      _id: uniqueId(),
      props: { style: { border: "1px solid black", padding: "10px" } },
      children: [
        {
          type: "AntdInput",
          _id: uniqueId(),
          props: {
            type: "text",
            placeholder: "请输入内容",
          },
        },
        {
          type: "AntdButton",
          _id: uniqueId(),
          children: "点击我",
          props: {
            onClick: () => alert("按钮被点击了！"),
          },
        },
        {
          type: "AntdGrid",
          _id: uniqueId(),

          props: {},
          children: [
            {
              type: "AntdButton",
              children: "点击我12",
              _id: uniqueId(),

              props: {
                onClick: () => alert("按钮被点击了！"),
              },
            },
            {
              type: "AntdButton",
              children: "点击我14",
              _id: uniqueId(),

              props: {
                onClick: () => alert("按钮被点击了！"),
              },
            },
          ],
        },
        {
          type: "AntdTabs",
          _id: uniqueId(),
          props: {},
          children: [
            {
              type: "AntdButton",
              _id: uniqueId(),

              props: {
                onClick: () => alert("按钮被点击了！"),
              },
              children: "点击我",
            },
            {
              type: "AntdButton",

              _id: uniqueId(),

              props: {
                onClick: () => alert("按钮被点击了！"),
              },
              children: "点击我",
            },
          ],
        },
        {
          type: "ProTable",
          _id: uniqueId(),
          props: {
            // headerTitle:{
            //   disableDesignerToolbar:true,
            //   type: "AntdButton",
            //   _id:uniqueId(),
            //   props: {
            //     onClick: () => alert("按钮被点击了！"),
            //     style: { margin: "10px 0" },
            //   },
            //   children: "点击我",
            // },
            // style: { border: "1px dashed red", padding: "10px" }
          },
        },
      ],
    },
  ],
};

const Test = () => {
  // const s = seContext(LowCodeDesignerContext)
  const ss = useContext(LowCodeDesignerContext);
  console.log("ssss", ss);
  // useContext(LowCodeDesignerContext)
  return <div>**</div>;
};
function App() {
  const urlParams = useParams();
  const { items, setItems } = useSchema();
  useEffect(() => {
    // findSiteMenu({ id: urlParams.menuId }).then((res: any) => {
    //   // form.setFieldsValue(res);
    //   if (res.schema) {
    //     setItems({ ...res.schema });
    //   } else {
    //     setItems(defaultSchema);
    //   }
    // });
    setItems({ ...items2 });
  }, []);
  const onSave = async () => {
    console.log("items", items);
    // items.children[0].children[1].children='ssss'
    setItems({ ...items });
    await saveSiteMenu({
      id: urlParams.menuId,
      schema: items,
    });
    message.success("保存成功");
  };
  console.log("renderChildren3", renderActionBar);
  return (
    <LowCodeDesignerProvider>
      <LowCodeProvider
        ComponentWrapper={DesignerActionBar}
        items={items}
        setItems={setItems}
        components={{
          // ProTable: 'http://localhost:8090/ProTable/setter.js',
          // LoginFormPage: 'http://localhost:8090/LoginFormPage/setter.js',
          ...setter,
        }}
      >
        <ConfigProvider
          theme={{
            components: {
              Layout: {
                // headerBg: "#fff",
                siderBg: "#fff",
                bodyBg: "#f5f5f5",
              },
            },
          }}
          layout={{}}
        >
          <Layout style={{ height: "100vh", overflow: "hidden" }}>
            <Layout.Header className="designer-header">
              <Row style={{ height: "100%" }}>
                <Col flex="200px"></Col>
                <Col flex={1}>
                  <Test />
                </Col>
                <Col
                  flex="200px"
                  style={{
                    display: "flex",
                    justifyContent: "end",
                    alignItems: "center",
                  }}
                >
                  <Button
                    type="primary"
                    icon={<SaveOutlined />}
                    onClick={onSave}
                  >
                    保存
                  </Button>
                </Col>
              </Row>
            </Layout.Header>
            <Layout style={{marginTop:60}}>
              <Layout.Sider className="designer-left-sider">
                <Store />
              </Layout.Sider>
              <Layout.Content
                className="designer-content"
                style={{
                  paddingLeft: 40,
                  overflow: "auto",
                  paddingRight: 40,
                  paddingTop: 10,
                }}
              >
                {/* <LowCodeRenderer items={items2}/> */}
                <LowCodeDesignerPreview />
              </Layout.Content>
              <Layout.Sider
                className="designer-right-sider"
                style={{ padding: 10 }}
              >
                <div>
                  <DesignerSetter />
                </div>
              </Layout.Sider>
            </Layout>
          </Layout>
        </ConfigProvider>
      </LowCodeProvider>
    </LowCodeDesignerProvider>
  );
}
export default App;
